<template>
	<ls-page title="">
		<view class="bookShop-container">
			<view class="bookShop-header">
				<view class="bookShop-city" style="position: relative;">
					<!-- <view class="bookShop-city-text">{{  }}</view> -->
					<view class="" style="position: relative;left: -25rpx;width: 150rpx;">
						<zb-popover placement="bottom-start" :options="cityList" ref="Popover1" @select="handleClick"
							class="item-popover" style="position:relative;right: -70rpx;">
							<view class="filter-continar" style="position: relative;left: -40rpx;">
								<view class="filter-title">
									{{ cityText}}
								</view>
								<image class="filter-arrow"
									src="https://oss.jtmckj.com/h5-uniapp/blanKarea/coupon/filter-arrow.png" mode="">
								</image>
							</view>
						</zb-popover>
					</view>

					<!-- <view class="bookShop-city-icon"></view> -->
				</view>
				<view class="bookShop-search">
					<!-- <x-search placeholder="请搜索附近店名" @change="onChange" /> -->
					<up-search bgColor="#fff" actionText="" placeholder="请搜索附近店名" @change="onChange"></up-search>
				</view>
			</view>
			<view class="bookShop-main">
				<view class="bookShop-list">
					<view class="bookShop-item" :style="'background:' + (stopCurrent == k ? '#E6E6E6' : '')"
						 @click="changeStop(k,v)" v-for="(v, k) in shopList" :key="k">
						<view class="bookShop-item-info">
							<view class="bookShop-item-title">{{ v.name }}</view>
							<view class="bookShop-item-time">营业时间：{{ v.startTime }}-{{ v.endTime }}</view>
							<view class="bookShop-item-location">{{ v.address }}</view>
						</view>

						<view class="bookShop-item-panel">
							<image class="bookShop-item-nav" src="https://oss.jtmckj.com/wmp/kbq/shop/i_icon_map.png"  @click.stop="onMap(v)"
								></image>
							<image class="bookShop-item-tel" src="https://oss.jtmckj.com/wmp/kbq/shop/i_icon_call.png"  @click.stop="onPhone(v)"
								></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</ls-page>
</template>

<script setup>
	import { ref } from 'vue';
	import { clearStoreGoodsNum } from "@/until/orderUtils.js"
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess, GetMinimsgTemplate,GetBaseConfigInfoH5 } from '@/api/public.js'
	import { getWeChatJsSDKConfig } from '@/until/tools.js'
	import wx from "weixin-js-sdk";
	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const shopInfo = uni.getStorageSync('shopInfo') //门店信息
	console.log(shopInfo, 'shopInfo')
	const userInfo = uni.getStorageSync('userInfo') //用户信息

	const shopList = ref([]) //店铺列表
	const cityList = ref([]) //城市列表

	const postForm = ref({
		City: '全部',
		Latitude: '',
		Longitude: "",
		brandCode: shopInfo.brandCode,
		OrgName: ''
	})
	const cardForm = ref({})
	
	const cityText = ref('全部')
	const from = ref('') //从什么页面来
    const  orgCode = ref("")
	const stopCurrent = ref(0)
	const SDKConfig = ref({})
	onLoad((options) => {
		cardForm.value = {
			mobiles:userInfo.mobile,
			openId:userInfo.openId,
			wechat:userInfo.mobile,
			name:userInfo.name,
			sex:userInfo.sex,
			birthday:userInfo.birthday,
			cardType:'2'
		}
		uni.getLocation({
		  type: 'gcj02',
		  success: function(res) {
		    // res经纬度信息
		    console.log(res.latitude, res.longitude);
		  },
		  fail: function(err) {
		    console.log('获取位置信息失败:', err);
		  }
		});
		from.value = options.from // 从什么页面来
		// if (app.global.location.address_component) {
		// 	postForm.value.City = app.global.location.address_component.city
		// } else {
		// 	postForm.value.City = '全部'
		// }

		if (!userInfo.latitude) {
			//   获取该城市的门店
			HFiveMemberAppObjProcess({ "functionName": "GetOrganize_H5", "contentData": postForm.value }).then(res => {
				if (shopInfo) {
					orgCode.value = shopInfo.orgCode
					const index = res.findIndex(obj => obj.code === orgCode);
					stopCurrent.value = index
				}
				shopList.value = res
				console.log(shopList, 'shopList')
			})
		} else {
			postForm.value.Latitude = userInfo.latitude
			postForm.value.Longitude = userInfo.longitude
			//   获取该城市的门店
			HFiveMemberAppObjProcess({ "functionName": "GetOrganize_H5", "contentData": postForm.value }).then(
				res => {

					if (shopInfo) {
						orgCode = shopInfo.orgCode
						const index = res.findIndex(obj => obj.code === orgCode);
						stopCurrent.value = index
					}
					console.log(res, 'fffffffffffffx')
					shopList.value = res

				})
		}


		// 获取有门店的城市列表
		HFiveMemberAppObjProcess({ "functionName": "GetOrganizeCity_H5", "contentData": { brandCode: "0005" } })
			.then(res => {
				// if (shopInfo.location.address_component) {
				// 	cityText.value = shopInfo.location.address_component.city
				// } else {
				// 	cityText.value = '全部'
				// }
				cityText.value = '全部'
				cityList.value = res.map(item => {
					return {
						"text": item.city
					}
				})
				console.log(cityList.value, 'cityList.value')
			})
			
			
		getWeChatJsSDKConfig().then(resking => {
					SDKConfig.value = resking
				})
	})

   const onPhone = (v)=> {
	   uni.makePhoneCall({
	   		phoneNumber: v.bookphone
	   });
   }
   const onMap = (v)=>{
	   console.log(v);
	   // postForm.value.Latitude = userInfo.latitude
	   // postForm.value.Longitude = userInfo.longitude
	   wx.config({
	   	debug: false, // 开启调试模式,
	   	appId: SDKConfig.value.appId, // 必填，企业号的唯一标识
	   	timestamp: SDKConfig.value.timestamp, // 必填，生成签名的时间戳
	   	nonceStr: SDKConfig.value.nonceStr, // 必填，生成签名的随机串
	   	signature: SDKConfig.value.signature, // 必填，签名
	   	jsApiList: ['openLocation'], // 必填，需要使用的JS接口列表
	   });
	   wx.ready((res) => {
	   	wx.openLocation({
	   		latitude: v.latitude,   // 纬度，浮点数，范围为-90&#126;90，负数表示南纬
	   	    longitude: v.longitude,  // 经度，浮点数，范围为-180&#126;180，负数表示西经
	   	    name: v.name,         // 位置名
	   	    address: v.address, // 详细地址
	   	    scale: 18,              // 地图缩放级别，整数，范围从1&#126;28。默认为最大
	   	    success: function(res) {
	   			},
	   	    fail: function(err) {
	   	        }
	   	});
	   })
	   
	   
   }

   //切换门店
	const changeStop = async (k,v) => {
		// uni.navigateBack({
		// 		delta:1,//返回层数，2则上上页
		// 	})
		// console.log(k,v);
		// return
	  try {
	    // 设置当前选择的门店
	    stopCurrent.value = k
		console.log(shopInfo);
		// return
		console.log(11111111);
	    // 更新全局的门店信息
	    shopInfo.orgCode = v.code
	    shopInfo.orgName = v.name
	   
	    // 存储门店信息到本地存储
	    uni.setStorageSync('shopInfo', shopInfo)
		

	    // 获取门店配置信息
	    const shopConfigRes  = await GetBaseConfigInfoH5()
	       console.log(shopConfigRes,'shopConfigRes')
	    // 更新店铺信息
		
	    // const data = JSON.parse(shopInfo.orgFunctions)
	
	    // 更新门店功能配置
	   uni.setStorageSync('shopInfo', shopConfigRes)
	   const cardRes = await HFiveMemberAppObjProcess({"functionName": "MemberOpenCard_H5","contentData": cardForm.value})
	   uni.removeStorageSync('cartList') // 商品信息
	   uni.removeStorageSync('tableInfo') // 桌台信息
	   uni.removeStorageSync('cardList') // 会员卡数组
	   uni.removeStorageSync('scanInfo') // 扫码信息
	   clearStoreGoodsNum() // 清空购物车
	   
	   const res = await HFiveMemberAppObjProcess({"functionName": "MemberInfo_H5","contentData": ""})
	   console.log(res);
	   uni.setStorageSync('cardInfo', res[0])
	   
	   
	  
	   
	//     const config = data.reduce((acc, curr) => {
	//       acc[curr.KeyName] = curr.ValueStr
	//       return acc
	//     }, {})
	
	//     shopInfo.IsCanOtherRecharge = config.IsCanOtherRecharge
	//     shopInfo.IsCanInvoice = config.IsCanInvoice
	
	    // 如果是会员，则加入会员卡
	    // if (app.globalData.isMember) {
	    //   joinCard()
	    // }
	
	    // 跳转逻辑
	    // if (app.globalData.from === 'queue') {
	    //   uni.redirectTo({
	    //     url: '/pages/home/queue/queue'
	    //   })
	    //   return
	    // }
	
	    if (getPage(2) && getPage(2).route === 'pages/home/book/book') {
	      uni.navigateBack()
	      uni.redirectTo({
	        url: '/subpkg/view/book/book'
	      })
	    } else {
	      uni.switchTab({
	        url: '/pages/home/index'
	      })
	    }
	
	//     // 更新访问量
	//     updateAccess()
	//     app.$UpdateAll()
	
	  } catch (error) {
	    console.error('错误:', error)
	  }
	}
	
	const getPage = (level) => {
	  // 获取页面实例
	  const pages = getCurrentPages()
	  return pages[pages.length - level]
	}
















	const handleClick = (v) => {
		cityText.value = v.text
	}
</script>

<style lang="less" scoped>
	.bookShop-container {
		.bookShop-header {
			display: flex;
			align-items: center;
			padding-left: 24rpx;

			.bookShop-city {
				display: flex;
				align-items: center;

				&-text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					// color: var(--one--self--color);
					line-height: 32rpx;
				}

				&-icon {
					width: 0;
					height: 0;
					border-left: 9rpx solid transparent;
					border-right: 9rpx solid transparent;
					border-top: 12rpx solid #212121;
					margin-left: 12rpx;
				}
			}

			.bookShop-search {
				flex: 1;
			}
		}

		.bookShop-main {
			margin-top: 20rpx;
			padding: 0 24rpx;

			.bookShop-list {
				.bookShop-item {
					background: var(--maincolor);
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					padding: 31rpx 24rpx 20rpx;
					display: flex;
					justify-content: space-between;

					&-info {}

					&-title {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 36rpx;
						color: var(--one--self--color);
						line-height: 36rpx;
					}

					&-time {
						padding-top: 23rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						// color: $x-color-primary;
						line-height: 26rpx;
					}

					&-location {
						margin-top: 23rpx;
						padding: 0 0 0 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						line-height: 24rpx;
						position: relative;

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 20rpx;
							height: 100%;
							background-image: url('https://oss.jtmckj.com/wmp/kbq/common/i_icon_address.png');
							background-size: 100% auto;
							background-position: left center;
							background-repeat: no-repeat;
						}
					}

					&-panel {}

					&-nav {
						width: 40rpx;
						height: 40rpx;
						display: block;
						/* padding-bottom: 20rpx;*/
						padding: 0rpx 0 20rpx;
					}

					&-tel {
						width: 40rpx;
						height: 40rpx;
						/* padding-top: 30rpx;*/
						padding: 30rpx 0 0rpx;
						/* margin-top: 50rpx;*/
						display: block;
					}
				}
			}
		}
	}

	/* 隐藏滚动条 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.bookShop-popover {
		box-sizing: border-box;
		background: #ffffff;
		-webkit-overflow-scrolling: touch;
		background-color: transparent;
		color: #212121;
		transform-origin: 0 0;
		z-index: 2007;
		margin: 0px;
		position: relative;
		top: 12rpx;

		&__arrow {
			position: absolute;
			width: 0;
			height: 0;
			/* border-color: #1c1c1e;*/
			border-color: transparent;
			border-style: solid;
			border-width: 12rpx;
			top: 0;
			border-top-width: 0;
			border-bottom-color: currentColor;
			margin-top: calc(-1 * 12rpx);
			color: #ffffff;
			left: 32rpx;
			z-index: 2007;
		}

		&__wrapper {
			overflow: hidden;
		}

		&__content {
			max-height: 880rpx;
			overflow-y: auto;
			border-radius: 16rpx;

			/* background: #1c1c1e;*/
			background: #ffffff;
			box-shadow: 0 4rpx 24rpx rgba(50, 50, 51, 0.12);
		}

		&__action {
			position: relative;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 256rpx;
			height: 88rpx;
			padding: 0 32rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			cursor: pointer;
		}

		&__action-text {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			height: 100%;
			border-bottom: 1px solid #e5e5e5;
		}
	}

	.bookShop-popup {
		.van-popup {
			border-radius: 16rpx;
			background-color: rgba(0, 0, 0, 0);
			left: 24rpx;
			top: 234rpx;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
	}

	.filter-continar {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.filter-title {
		margin-right: 12rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: var(--maincolorf1);
	}

	.filter-arrow {
		width: 18rpx;
		height: 12rpx;
	}

	::v-deep .zb-fade-zoom-enter-active {
		right: 20rpx !important;
	}
</style>